<template>
    <div>
        <!--            标题-->
        <el-row class=" border_bottom" type="flex" justify="start">
            <el-col :span="12">
                <h3> 会员管理</h3>
            </el-col>
        </el-row>
        <!--输入栏-->
        <el-row type="flex" justify="start">

            <el-col :span="5">
                <span class="b1">昵称：</span>
                <el-input v-model="memberName" placeholder="请输入昵称" style='width:230px'></el-input>
            </el-col>

            <el-col :span="5">
                <span>手机号码：</span>
                <el-input v-model="memberPhone" placeholder="请输入手机号" style='width:230px'></el-input>
            </el-col>
            <el-col :span="4">
                <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
                <el-button type="primary" plain  @click="refrsh">刷新</el-button>
            </el-col>
        </el-row>
        <!--表格-->
        <el-row>
            <template>
                <el-table
                        ref="multipleTable"
                        :data="memberList"
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="handleSelectionChange">
                    <el-table-column
                            width="55">
                    </el-table-column>
                    <el-table-column
                            label="ID"
                            width="120">
                        <template slot-scope="scope">{{ scope.row.userId }}</template>
                    </el-table-column>
                    <el-table-column
                            label="头像"
                            width="120">
                        　
                        <template slot-scope="scope">
<!--                            <el-image-->
<!--                                    style="width: 50px; height: 50px" :src="scope.row.headimg"-->

<!--                            ></el-image>-->
                            <img  style="width: 50px; height: 50px" :src="scope.row.userIcon">
                            　　
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="userName"
                            label="昵称"
                            show-overflow-tooltip>
                    </el-table-column>

                    <el-table-column
                            prop="userGender"
                            label="性别"
                            show-overflow-tooltip>
                        <template slot-scope="scope">
                            　　　   <span>{{scope.row.userGender==false?'男':'女'}}</span>　　　

                        </template>


                    </el-table-column>
                    <el-table-column
                            prop="userPoints"
                            label="地址"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="userPhone"
                            label="手机号码"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            label="操作">
                        　
                        <template slot-scope="scope">
                            　　　
                            <el-button type="text" @click="getShippingManager( scope.row.userId)">收货地址</el-button>
                            　　　
                            <el-button type="text" @click="getAccountDetil( scope.row.userId)">查看账目明细</el-button>
                            　　　
                            <el-button type="text" @click="delAccountDetil( scope.row.userId)">删除</el-button>
                            　　
                        </template>
                    </el-table-column>
                </el-table>
            </template>


        </el-row>

        <el-row>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-size="5"
                    layout="total, prev, pager, next"
                    :total="count">
            </el-pagination>
        </el-row>


    </div>
</template>
<script>
    import qs from 'qs'
    import MemberAccountDetails from './MemberAccountDetails'
    import ShippingAddress from './ShippingAddress'
    import router from "@/router";
    export default {

        name: "MemberManage",
        data() {
            return {

                path:'http://172.17.4.241:8888/upload',

                memberName: '',
                memberPhone: '',
                memberList:[],
                multipleSelection: [],
                currentPage: '',
                currentPage4: 1,
                // 当前查询id
                currentSearchId:'',
                //总条数
                count:0,



            }
        },

        created() {



this.getMember()
        },
        methods: {
            refrsh(){
                this.getMember()
            },

            // 会员列表的显示
            getMember(){
                this.$axios.post('/api/user/list').then((res)=>{
                    console.log(res.data.data)
                    this.memberList=res.data.data
                })

                this.$axios.post('/api/user/count').then((res)=>{

                    this.count=res.data.data
                })
            }
            ,
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                // 分页查询
                //发起请求
                this.$axios.post('/api/user/list?page='+val).then((res)=>{
                    this.memberList=res.data.data
                    console.log('*****************************************************8')
                    console.log(val);
                    console.log(res);
                    console.log(`当前第 ${val}页数据：`+res.data);
                })
            },
            // 获取单条账户明细
            getAccountDetil(currentSearchId){
                sessionStorage.setItem('currentSearchId',currentSearchId)


                router.push({name: 'MemberAccountDetails'})
            },
            // 删除单条账户详细
            delAccountDetil(id){
                var that = this
                console.log(id)
                this.currentSearchId=id
                this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    console.log(this.currentSearchId);
                    // 发起请求[1,2]
                    this.$axios.post('/api/user/delete',[...[Number(this.currentSearchId)]] ).then((res)=>{
                        console.log(res);

                        this.getMember()

                    })
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            //跳转收货地址
            getShippingManager(id){
                this.currentSearchId=id

                sessionStorage.setItem('currentSearchId',this.currentSearchId)
                router.push({name: 'ShippingAddress'})
            }
            ,
            // 查询会员
            search() {
                console.log(this.memberName);
                if (this.memberPhone.trim() == '' && this.memberName.trim() == '') {
                    this.$message({
                        type: 'info',
                        message: '必须输入才能查询'
                    });
                }
else {

                //发起请求
                this.$axios.post('/api/user/list?userPhone=' + this.memberPhone + '&userName=' + this.memberName).then((res) => {
                    // console.log(this.memberPhone);
                    console.log('***************************************')
                    console.log(res);
                    if (res.data.data.length>0) {
                        this.memberList = res.data.data
                    }else {
                        console.log(res.data.code.length);
                        this.$message({
                            type: 'err',
                            message: '没有该会员，请重新核对'
                        });
                        }

                })
            }

            }
        }
    }
</script>

<style scoped>

    .b1 {
        /*border: 1px solid red;*/
    }

    .b2 {
        /*border: 1px solid blue;*/
    }

    .border_bottom {

        border-bottom: 1px solid grey;
    }

    .el-input {
        display: inline-block;
    }

    span {
        margin-top: 20px;
    }

    .middle {
        align-items: center;
    }
</style>